<template>
    <div>
        <div id="mainS2" style="width: 100%;height:16.25rem;position: absolute;left: 0;right: 0;top: -2.625rem;margin: auto;">
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetCarScale } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    RequestStatisticGetCarScale().then((res: any) => {

        var chartDom = document.getElementById('mainS2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            grid: {
                left: '3%',
                right: '3%',
                bottom: '4%',
                containLabel: true,
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '12%',
                left: 'center',
                itemWidth: 10,
                itemHeight: 10,
                borderRadius: 4
            },
            color: ['#017efa', '#b6e9ff'],
            series: [
                {
                    name: '拆解资源占比',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    label: {
                        normal: {
                            formatter: '{b}:{d}%',
                            position: 'center'
                        },
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 16,
                            fontWeight: 'bold'
                        }
                    },
                    data: res.resultObj
                }
            ]
        };

        option && myChart.setOption(option);
    })
})
</script>
<style lang="scss" scoped></style>